<template>
	<view class="">
		<view class="swiper">
			<u-swiper :list="list"  indicatorMode="line" circular height="360rpx"></u-swiper>
		</view>
		<view class="container">
			
			<view class="house-title">
				整租｜两室一厅 南 免费车位 民水民电
			</view>
			<view class="house-price">
				2500元/月
			</view>
			
			<view class="house-require">
				<view class="house-require-item">
					<image src="/static/images/house/pattern.png" mode="widthFix" style="width: 30rpx;margin-right: 4rpx;">
					</image> 2室1厅
				</view>
				<view class="house-require-item">
					<image src="/static/images/house/area.png" mode="widthFix" style="width: 27rpx;margin-right: 4rpx;">
					</image>
					60平
				</view>
				<view class="house-require-item">
					<image src="/static/images/house/floor.png" mode="widthFix" style="width: 32rpx;margin-right: 4rpx;">
					</image>
					8/24层
				</view>
				<view class="house-require-item">
					<image src="/static/images/house/direction.png" mode="widthFix" style="width: 27rpx;margin-right: 4rpx;">
					</image>
					朝南
				</view>
			</view>
			<view class="house-address">
				<image src="/static/images/job/address.png" mode="widthFix" style="width: 30rpx;margin-right: 4rpx;">
				</image>高新区桂林街道高速时代广场D座
			</view>
			<view class="title">
				房屋详情
			</view>
			<view class="house-tag">
				<view class="house-tag-item">
					押一付三
				</view>
			</view>
			<view class="content">
				<view class="content-title">
					房屋介绍:
				</view>
				<text class="content-text">
					1、负责业主家庭卫生清洁工作；
					2、负责家庭用餐的食材采购、做饭等工作；
				</text>
			</view>
			<u-divider :hairline="true"></u-divider>
			<view class="title">
				个人信息
			</view>
			<view class="info">
				<view class="info-row">
					<view class="info-label">
						姓名:
					</view>
					<view class="info-content">
						<view class="info-content-name">
							赵女士 
						</view>
						<view class="info-content-active">
							已认证
						</view>
					</view>
				</view>
				<view class="info-row">
					<view class="info-label">
						地址:
					</view>
					<view class="info-content">
						<view class="info-content-text">
							合肥市经开区天鹅湖畔莲花大道897号
							景秀花园小区
						</view>
						<view class="info-icon">
							<image src="/static/images/job/arrow-right.png" mode="widthFix" style="width: 30rpx;"></image>
						</view>
					</view>
					
				</view>
			</view>
			<u-divider :hairline="true"></u-divider>
			<view class="title">
				<view class="">
					评价 <text style="font-size: 30rpx;">(888条)</text>
				</view> <image src="/static/images/job/arrow-right.png" mode="widthFix" style="width: 30rpx;"></image>
			</view>
			<!-- <commentItemComponent></commentItemComponent>
			<commentItemComponent></commentItemComponent> -->
			<bottomComponent>
				<view class="bottom">
					<image src="/static/images/job/collection.png" mode="widthFix" style="width: 65rpx;"></image>
					<view class="bottom-btn">
						拨打电话
					</view>
				</view>
			</bottomComponent>
		</view>
	</view>
	
</template>

<script>
	import commentItemComponent from "@/components/commentItemComponent/index.vue"
	import bottomComponent from "@/components/bottomComponent/index.vue"
	export default {
		components: {
			commentItemComponent,
			bottomComponent
		},
		data(){
			return {
				list: ['https://cdn.uviewui.com/uview/swiper/swiper1.png',
                    'https://cdn.uviewui.com/uview/swiper/swiper2.png',
                    'https://cdn.uviewui.com/uview/swiper/swiper3.png',]
			}
		}
	}
</script>

<style>
	page {
		background: #649CF6 linear-gradient(360deg, #fff 0%, #ECF3FF 60%, #F1F6FF 96%, #F1F6FF 100%);
	}
</style>
<style scoped lang="scss">
	.swiper{
		width: 730rpx;
		margin: 20rpx auto 0;
	}
	.container {
		width: 730rpx;
		margin: 0rpx auto 160rpx;
		border-radius: 6rpx;
		box-sizing: border-box;
		padding: 26rpx 26rpx 26rpx;
		background-color: #fff;

		.house-title {
			font-weight: bold;
			font-size: 34rpx;
			color: #000000;
			line-height: 52rpx;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.house-price {
			margin: 10rpx 0;
			font-weight: bold;
			font-size: 31rpx;
			color: #005DFF;
			line-height: 46rpx;
		}

		.house-address {
			margin: 10rpx 0;
			font-weight: 500;
			font-size: 23rpx;
			color: #9E9E9E;
			line-height: 34rpx;
			display: flex;
		}

		.house-require {

			display: flex;
			align-items: center;

			.house-require-item {
				font-weight: 500;
				font-size: 23rpx;
				color: #9E9E9E;
				line-height: 34rpx;
				display: flex;
				align-items: center;
			}

			.house-require-item+.house-require-item {
				margin-left: 30rpx;
			}
		}

		.title {
			margin: 20rpx 0;
			font-weight: bold;
			font-size: 34rpx;
			color: #000000;
			line-height: 52rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.house-tag {
			margin: 10rpx 0;
			display: flex;
			align-items: center;

			.house-tag-item {
				padding: 0 16rpx;
				background-color: #E9F1FF;
				line-height: 40rpx;
				font-size: 24rpx;
				color: #005DFF;
				text-align: center;
				border-radius: 46rpx;
			}

			.house-tag-item+.house-tag-item {
				margin-left: 12rpx;
			}
		}

		.content {
			margin: 20rpx 0;
			font-weight: 400;
			font-size: 29rpx;
			color: #3F3F3F;
			line-height: 44rpx;
		}
		.info{
			margin: 20rpx 0;
			font-weight: 400;
			font-size: 29rpx;
			color: #3F3F3F;
			line-height: 44rpx;
			.info-row{
				display: flex;
				.info-label{
					margin-right: 10rpx;
				}
				.info-content{
					flex: 1;
					display: flex;
					align-items: center;
					.info-content-text{
						flex: 1;
						padding-right: 20rpx;
					}
					.info-content-active{
						margin-left: 20rpx;
						padding: 0 20rpx;
						line-height: 34rpx;
						background: #E9F1FF;
						border-radius: 34rpx;
						color: #005DFF;
						font-size: 23rpx;
					}
				}
			}
		}
		.bottom{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.bottom-btn{
				width: 527rpx;
				line-height: 86rpx;
				background: #2B5BF8;
				border-radius: 86rpx;

				font-weight: 500;
				font-size: 38rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}
	}
</style>